<template>
  <div class="container">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="10"
    >
      <van-card
        class="item"
        v-for="collect in list"
        :thumb="type===1?collect.goods.picUrl:collect.article.picUrl"
        @click="type===1?router.push({name:'goods',params:{id:collect.goods.id}}):
          router.push({
            path: '/article-detail',
            query: { articleId: collect.article.id },
          })
        "
      >
        <template #title>
          <p class="title">
            {{ type===1?collect.goods.name:collect.article.title }}
          </p>
        </template>
        <template #price>
          <p class="desc">
            {{ type===1?`￥${(collect.goods.price/100).toFixed(2)}`:collect.article.desc }}
          </p>
        </template>
        <template #num>
          <p>{{ collect.created_at }}</p>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import usePagePaging from "@/hooks/usePagePaging";
import { collectList } from "@/api/collect";
import { defineProps } from "vue";

let props = defineProps({
  type: Number,
});

let router = useRouter();
let { list, loading, finished, onLoad } = usePagePaging(collectList, {
  page: 1,
  limit: 10,
  type: props.type,
});
</script>

<style scoped lang="less">
.container {
  :deep(.van-list__finished-text) {
    padding-bottom: 0;
  }
  .item {
    margin-bottom: 10px;
    margin-top: 10px;
  }
}
</style>